{% extends "base.html" %}
{% block color %}{{ color }}{% endblock %}
{% block functions %}
function adjustRatio(img) {
  if(window.innerHeight < img.height) {
    img.style.height = '100%';
    img.style.width = 'auto';
  }
  else if(window.innerWidth < img.width) {
    img.style.width = '100%';
    img.style.height = 'auto';
  }
}

function fitImageToScreen() {
  adjustRatio(document.getElementById('bigimage'));
}
{% endblock %}
{% block script %}
$('#bigimage').each(function() {
  // Get image instance.
  var image = new Image();
  image.src = $(this).attr('src');
  if (image.complete)        
    fitImageToScreen();        
  else        
    image.onload = fitImageToScreen;
});
fitImageToScreen();
$(document).keypress(function() {
  if (event.which == '117') {
    location.href = "{{ source }}";
    }
});
$('#bigimage').fadeIn(800);
$('#bigimage').wrap('<center></center>');
$(window).resize(fitImageToScreen);
setTimeout("fitImageToScreen()", 500);
{% endblock %}
{% block content %}
  <div class="label-title">{{ name }}</div>
  <div class="bigimage-panel">
    <a href="{{ source }}">
      <img id="bigimage" src='/image/{{image}}/1'>
    </a>
  </div>
{% endblock %}
